"use client";
import { Avatar, Card, Col, Row, Descriptions, Tag, Button } from "antd";
import { useSelector } from "react-redux";
import { RootState } from "@/stores";
import Title from "antd/es/typography/Title";
import Paragraph from "antd/es/typography/Paragraph";
import { useEffect, useState } from "react";
import {
  UserOutlined,
  PhoneOutlined,
  MailOutlined,
  BookOutlined,
  ExperimentOutlined,
  StarOutlined,
  EditOutlined,
  CrownOutlined,
  TeamOutlined,
  SafetyOutlined,
} from "@ant-design/icons";

import "./index.css";
import CalendarChart from "@/app/user/center/compoments/CalendarChart";
import UserEditForm from "@/app/user/center/compoments/UserEditForm";
import QuestionViewRecordList from "./compoments/QuestionViewRecordList";

/**
 * 获取用户角色显示信息
 */
const getUserRoleInfo = (userRole?: string) => {
  switch (userRole) {
    case "admin":
      return { text: "管理员", color: "red", icon: <CrownOutlined /> };
    // case 'vip':
    //     return { text: 'VIP用户', color: 'gold', icon: <StarOutlined /> };
    default:
      return { text: "普通用户", color: "default", icon: <UserOutlined /> };
  }
};

/**
 * 用户中心页面
 * @constructor
 */
export default function UserCenterPage() {
  // 获取登录用户信息
  const loginUser = useSelector((state: RootState) => state.loginUser);
  // 便于复用，新起一个变量
  const user = loginUser;
  // 控制菜单栏的 Tab 高亮
  const [activeTabKey, setActiveTabKey] = useState<string>("profile");
  // 控制编辑模式
  const [isEditing, setIsEditing] = useState<boolean>(false);
  // // 添加刷新浏览记录的触发器
  //   const [refreshRecordTrigger, setRefreshRecordTrigger] = useState(0);
  //   //当切换到"刷题记录"标签时，自动刷新浏览记录
  //   useEffect(() => {
  //       if (activeTabKey === "record") {
  //           setRefreshRecordTrigger(prev => prev + 1);
  //       }
  //   }, [activeTabKey]);
  //   // 在QuestionViewRecordList组件中添加刷新回调
  //   const handleRecordRefresh = () => {
  //       // 可以在这里添加额外的逻辑
  //       console.log("浏览记录已刷新");
  //   };
  // 获取用户角色信息
  const roleInfo = getUserRoleInfo(user.userRole);


  return (
    <div id="userCenterPage" className="max-width-content">
      <Row gutter={[24, 24]}>
        <Col xs={24} md={6}>
          <Card className="user-info-card">
            <div className="avatar-container">
              <Avatar src={user.userAvatar} size={80} className="user-avatar" />
            </div>

            <div className="user-info-content">
              <Title level={3} className="user-name">
                {user.userName}
              </Title>

              <div className="user-role-container">
                <Tag
                  color={roleInfo.color}
                  icon={roleInfo.icon}
                  className="user-role-tag"
                >
                  {roleInfo.text}
                </Tag>
              </div>

              <Paragraph type="secondary" className="user-profile">
                {user.userProfile || "这个人很懒，什么都没有留下..."}
              </Paragraph>
            </div>
          </Card>
        </Col>
        <Col xs={24} md={18}>
          <Card
            className="main-content-card"
            tabList={[
              {
                key: "profile",
                label: (
                  <span className="tab-label">
                    <UserOutlined />
                    个人信息
                  </span>
                ),
              },
              {
                key: "record",
                label: (
                  <span className="tab-label">
                    <BookOutlined />
                    刷题记录
                  </span>
                ),
              },
              {
                key: "others",
                label: (
                  <span className="tab-label">
                    <TeamOutlined />
                    其他
                  </span>
                ),
              },
            ]}
            activeTabKey={activeTabKey}
            onTabChange={(key: string) => {
              setActiveTabKey(key);
            }}
          >
            {activeTabKey === "profile" && (
              <div className="tab-content">
                <div className="profile-header">
                  <Title level={4} className="profile-title">
                    <UserOutlined className="profile-title-icon" />
                    个人信息
                  </Title>
                  {!isEditing && (
                    <Button
                      type="primary"
                      icon={<EditOutlined />}
                      onClick={() => setIsEditing(true)}
                      className="edit-button"
                    >
                      编辑信息
                    </Button>
                  )}
                </div>

                {isEditing ? (
                  <UserEditForm
                    onCancel={() => setIsEditing(false)}
                    onSuccess={() => setIsEditing(false)}
                  />
                ) : (
                  <Descriptions
                    column={1}
                    bordered
                    size="middle"
                    className="user-info-descriptions"
                  >
                    <Descriptions.Item
                      label={
                        <span>
                          <PhoneOutlined className="info-icon" />
                          手机号
                        </span>
                      }
                    >
                      {user.phoneNumber || (
                        <span className="not-set">未设置</span>
                      )}
                    </Descriptions.Item>
                    <Descriptions.Item
                      label={
                        <span>
                          <MailOutlined className="info-icon" />
                          邮箱
                        </span>
                      }
                    >
                      {user.email || <span className="not-set">未设置</span>}
                    </Descriptions.Item>
                    <Descriptions.Item
                      label={
                        <span>
                          <BookOutlined className="info-icon" />
                          年级
                        </span>
                      }
                    >
                      {user.grade ? (
                        <Tag color="blue" className="info-tag blue">
                          {user.grade}
                        </Tag>
                      ) : (
                        <span className="not-set">未设置</span>
                      )}
                    </Descriptions.Item>
                    <Descriptions.Item
                      label={
                        <span>
                          <ExperimentOutlined className="info-icon" />
                          工作经验
                        </span>
                      }
                    >
                      {user.workExperience ? (
                        <span className="work-experience">
                          {user.workExperience}
                        </span>
                      ) : (
                        <span className="not-set">未设置</span>
                      )}
                    </Descriptions.Item>
                    <Descriptions.Item
                      label={
                        <span>
                          <StarOutlined className="info-icon" />
                          擅长方向
                        </span>
                      }
                    >
                      {user.expertiseDirection ? (
                        <Tag color="green" className="info-tag green">
                          {user.expertiseDirection}
                        </Tag>
                      ) : (
                        <span className="not-set">未设置</span>
                      )}
                    </Descriptions.Item>
                  </Descriptions>
                )}
              </div>
            )}
            {activeTabKey === "record" && (
              <div className="tab-content">
                <CalendarChart />
                {/* 题目浏览记录展示 */}
                <QuestionViewRecordList
                    // refreshTrigger={refreshRecordTrigger}
                    // onRefresh={handleRecordRefresh}
                />
              </div>
            )}
            {activeTabKey === "others" && (
              <div className="others-content">
                <TeamOutlined className="others-icon" />
                <p>更多功能正在开发中...</p>
              </div>
            )}
          </Card>
        </Col>
      </Row>
    </div>
  );
}
